<template>
    <div class="skill-detail f f-ac f-col">
        <Breadcrumb router/>
        <div class="skill-detail-body">
            <div class="body-top mt-30 f f-ac f-jb">
                <img class="top-left" :src="baseUrl + detail.image" />
                <div class="top-center">
                    <div class="skill-title line-1">{{ detail.title || "-" }}</div>
                    <div class="share mb-20"><i class="el-icon-share" /> 分享</div>
                    <div class="mb-20">固定电话：{{ detail.telphone || "-" }}</div>
                    <div class="mb-20">开放时间：{{ detail.createtime || "-" }}</div>
                    <div class="mb-20 line-2">地址：{{ detail.address || "-" }}</div>
                </div>
                <div class="top-right">
                    <div id="allmap"></div>
                </div>
                <!-- <img class="top-right" :src="detail.coverPath" /> -->
            </div>
            <div class="line-row" />
            <div class="body-bottom mt-30">
                <My-btn label="活动室" bg-color="line-blue" read-only />
                <div class="site-room-box mt-30 mb-30 pb-30 f f-w f-jb">
                    <div class="site-room-item f f-ac f-jb" v-for="(i, k) in detail.site" :key="k">
                        <img :src="baseUrl + i.image" />
                        <div class="f-1 f f-col f-jb">
                            <div class="room-name line-1">{{ i.title || "-" }}</div>
                            <div>联系电话：{{ detail.telphone || "-" }}</div>
                            <div>容纳人数：可容纳{{ i.limit || 0 }}人</div>
                            <My-btn label="立即预定" bg-color="dark-blue" width="190" height="39"
                                @click="handleReserved(i)" />
                        </div>
                    </div>
                </div>
                <My-btn label="详情信息" bg-color="line-blue" read-only />
                <div class="body-content mt-20" v-html="detail.msg" />
                <Action-bar :comment="detail.count" :like="detail.like" :collect="detail.collect" :type="6"
                    :is_like="detail.is_like" :is_collect="detail.is_collect" :id="detail.id"
                    @like="handleLike"/>
                <Comment :id="detail.id" @comfirm="handleComment" :type="6" :admin_id="detail.admin_id"/>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        venueDetail
    } from "@/utils/order/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                detail: {},
                lat: '',
                lng: '',
            };
        },

        mounted() {},
        created() {
            this.detail.id = this.$route.query.id
            this.getDetails(this.detail.id);
        },
        methods: {
            getMap() {
                // 按住鼠标右键，修改倾斜角和角度
                var map = new BMapGL.Map("allmap"); // 创建Map实例
                map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 11); // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true); //开启鼠
            },
            // 获取详情
            getDetails(id) {
                this.loading = true;
                let that = this
                venueDetail({
                    id
                }).then((response) => {
                    that.detail = response.data
                    console.log(that.detail)
                    that.lat = that.detail.lat
                    that.lng = that.detail.lng
                    that.getMap();
                    that.loading = false;
                });
            },
            // 点击报名
            handleReserved(i) {
                this.$message.success('暂未开放！');
                return
                this.$router.push({
                    path: "/reservedSite/reserved",
                    query: {
                        id: i.id,
                        venue_lists_id:this.detail.id
                    },
                });
            },
            // 评论
            handleComment(v) {
                this.detail.comment = v;
            },
             // 点赞/收藏
             handleLike(v) {
                this.getDetails(v) 
            }
        },
    };
</script>

<style lang="scss" scoped>
    #allmap {
        height: 290px;
    }

    .skill-detail {
        width: 100%;

        &-body {
            width: 1200px;

            .body-top {
                width: 100%;
                height: 332px;
                box-sizing: border-box;
                padding: 20px;
                border: 1px solid #d9d9d9;

                .top-left {
                    width: 408px;
                    height: 100%;
                }

                .top-center {
                    width: 293px;
                    margin: 0 20px;
                    height: 292px;

                    >div {
                        color: #333;
                        font-size: 16px;
                    }

                    .skill-title {
                        color: #193980;
                        font-size: 24px;
                        font-weight: 600;
                        line-height: 50px;

                        &::after {
                            content: "";
                            display: block;
                            width: 115px;
                            height: 2px;
                            background: #0a4ab6;
                            margin: 20px 0;
                        }
                    }

                    .share {
                        color: #909090;
                        font-size: 14px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #d9d9d9;
                    }
                }

                .top-right {
                    width: 417px;
                    height: 100%;
                }
            }

            .line-row {
                height: 1px;
                width: 100%;
                margin-top: 30px;
                background-color: #d9d9d9;
            }

            .body-bottom {
                .site-room-box {
                    border-bottom: 1px solid #d9d9d9;

                    .site-room-item {
                        width: 560px;
                        height: 202px;
                        margin-bottom: 28px;

                        >img {
                            width: 313px;
                            height: 202px;
                            margin-right: 40px;
                        }

                        >.f-1 {
                            height: 202px;

                            >div {
                                color: #333;
                                font-size: 16px;
                                font-weight: 600;
                            }

                            .room-name {
                                width: 190px;
                                color: #193980;
                                font-size: 24px;
                                font-weight: 600;
                            }
                        }
                    }
                }

                .body-content {
                    word-break: break-all;
                    padding-bottom: 30px;
                    border-bottom: 1px dashed #d9d9d9;
                }
            }
        }
    }
</style>